<template>
	<div class="container home">
		<div class="header" style="height: 10px;background: none;">
			<Header></Header>
		</div>
		<el-button style="margin-top:20px" @click="goBack">返回</el-button>
		<div class="container-main" style="padding-top:15px">
			<!-- <div class="position-main">
				<div class="wd1200">
					<div class="position"><span>首页</span><span>预警通</span>我收藏的企业</div>
				</div>
			</div> -->
			<div class="wd12000">
				<!-- <div class="search-main overflow">
					<div class="search-right fr">
						<el-button type="primary" @click="searchbt">搜索</el-button>
						<el-button type="primary" @click="add">添加企业</el-button>
					</div>
					<div class="search-left overflow"><el-input v-model="companyName" placeholder="请输入企业名称"></el-input></div>
				</div> -->
				<div class="favorite-companies">
					<div class="title">
						共计 <span>{{total}}</span> 家
						<div class="search-right fr">
							<el-button type="primary" @click="add">添加企业</el-button>
						</div>
					</div>
					<div class="table-box">
						<el-table v-if="total > 0" :data="companieslist" border style="width: 100%">
							<!-- <el-table-column label="预警" width="100">
								<template slot-scope="scope">
									<div style="color: #FF596A;" v-if="scope.row.capitalNum != null">{{scope.row.capitalNum}}</div>
									<div v-else>--</div>
								</template>
							</el-table-column> -->
							<el-table-column label="企业名称">
								<template slot-scope="scope">
									<div class="pointer" v-if="scope.row.companyName != null" @click="details(scope.row.companyId)">{{scope.row.companyName}}</div>
									<div v-else>--</div>
								</template>
							</el-table-column>
							<el-table-column prop="legalPerson" label="法定代表人" width="120">
							</el-table-column>
							<el-table-column prop="establishDate" label="注册日期" width="150">
							</el-table-column>
							<!-- <el-table-column prop="c5" label="注册资本">
							</el-table-column> -->
							<el-table-column prop="companyAddress" label="企业地址">
							</el-table-column>
							<el-table-column label="状态" width="180">
								<template slot-scope="scope">
									<div style="color: #24C84C">{{scope.row.companyStatus}}</div>
								</template>
							</el-table-column>
							<el-table-column  label="操作" width="110">
								<template slot-scope="scope">
									<div class="pointer" style="color: #0071DF;" @click="collectremove(scope.row.collectId)">取消自选</div>
								</template>
							</el-table-column>
						</el-table>
						<el-empty v-else :image-size="200"></el-empty>
					</div>
				</div>
			</div>
			
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import {
		collectlistapi,
		addsearchapi,
	} from "@/api/warning/index";
	import {
		removeapi
	} from "@/api/enterprise/index";
	import Header from "@/components/header";
	import Footer from "@/components/footer";
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				companieslist:[],
				total:0,
				endDate:'',
				companyName:'',
				collecttotal:0,
				userId:'',
				phonenumber:''
			}
		},
		created() {
			if(JSON.parse(sessionStorage.getItem('user') != null)){
				this.userdata = JSON.parse(sessionStorage.getItem('user'));
				this.userId = JSON.parse(sessionStorage.getItem('userId'));
				this.phonenumber = this.userdata.phonenumber
			}
			function formatDate(date) {
			  const year = date.getFullYear();
			  const month = ('0' + (date.getMonth() + 1)).slice(-2);
			  const day = ('0' + date.getDate()).slice(-2);
			  const hours = ('0' + date.getHours()).slice(-2);
			  const minutes = ('0' + date.getMinutes()).slice(-2);
			  const seconds = ('0' + date.getSeconds()).slice(-2);
			  return `${year}-${month}-${day}`;
			}
			const date = new Date();
			this.endDate = formatDate(date);
			this.collectinit()
		},
		mounted() {
			
		},
		methods:{
			goBack() {
			    this.$router.go(-1); // 或者 this.$router.back()
			},
			collectinit(){
				let userId = this.userId
				collectlistapi(userId).then(res => {
					this.companieslist = res.data.rows
					this.total = res.data.total
				})
			},
			collectremove(id) {
				removeapi(id).then(res => {
					if(res.errcode == 0){
						this.$message({
						  showClose: true,
						  message: '取消成功',
						  type: 'success'
						});
						this.collectinit()
					}
				});
			},
			add(){
				this.$router.push({ path:'/addenterprise'})
			},
			searchbt(){
				let queryParams = {
					companyName:"%"+this.companyName+"%",
					endDate:this.endDate,
					pageNumber:1,
					pageSize:20,
					phonenumber:this.phonenumber,
					userId:this.userId
				}
				addsearchapi(queryParams).then(res => {
					this.companieslist = res.data.content
					this.total = res.data.total
				})
			},
			details(id) {
				this.$router.push({
					path: '/details',
					query: {
						id: id,
						wdtype:1
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.home {
		.header {
			height: 418px;
			background: url(../../assets/images/banner.png) no-repeat left center;
		
			.navbar {
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				height: 100px;
				padding: 0 30px;
		
				.logo {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100px;
					font-size: 26px;
					color: #fff;
					font-weight: bold;
					margin-right: 8%;
		
					img {
						margin-right: 11px;
					}
				}
		
				.nav {
					display: flex;
					height: 100px;
					justify-content: center;
					align-items: center;
					font-size: 20px;
					color: #fff;
					font-weight: bold;
		
					.box {
						position: relative;
						height: 100px;
						line-height: 100px;
		
						span {
							position: absolute;
							left: 0;
							bottom: 0;
							height: 5px;
							background: #fff;
							display: block;
							width: 60px;
						}
					}
		
					.box::after {
						content: "|";
						margin: 0 36px;
						color: rgba(255, 255, 255, 0.2);
						font-weight: initial;
						font-size: 18px;
					}
		
					.box:last-child::after {
						display: none;
					}
		
				}
		
				.user {
					display: flex;
					height: 95px;
					justify-content: center;
					align-items: center;
		
					.box {
						font-size: 16px;
						line-height: 28px;
						color: #FFFFFF;
						font-weight: 400;
						background: url(../../assets/images/usericon.png) no-repeat left center;
						padding-left: 22px;
					}
		
					.bt {
						width: 62px;
						height: 28px;
						line-height: 28px;
						text-align: center;
						background: #FFFFFF;
						border-radius: 5px 5px 5px 5px;
						font-size: 12px;
						color: #000000;
						font-weight: 400;
						margin-left: 10px;
						cursor: pointer;
					}
				}
			}

		}
		.position-main{
			border-bottom: 1px solid #E8EAEC;
			margin-bottom: 34px;
		}
		.position {
			font-weight: 400;
			font-size: 18px;
			color: #6F6F6F;
			line-height: 24px;
			margin: 24px 0;
			background: url(../../assets/images/iconhome.png) no-repeat left center;
			padding-left: 26px;
		
			span {
				color: #0071DF;
			}
		
			span::after {
				content: '/';
				margin: 0 12px;
				color: #6F6F6F;
			}
		}
		.search-main{
			.search-right{
				margin-left: 16px;
			}
		}
		.favorite-companies{
			.title{
				font-weight: 400;
				font-size: 15px;
				color: #000000;
				line-height: 52px;
				span{
					color:#FF8C1A
				}
			}
		}
	}
</style>
<style>
	.el-table .cell {
		font-size: 16px;
		color: #000000;
		line-height: 25px;
		padding: 5px 20px;
		font-weight: 400;
	}

	.dialogtable .el-table .cell .el-table--border .el-table__cell:first-child .cell {
		padding-left: 20px;
	}

	.el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		background: #F7FBFF;
	}

	.dialogtable .el-table .cell {
		font-size: 14px;
		padding: 2px 15px;
	}

	.el-dialog__header {
		border-bottom: 2px dashed #eee;
	}
	@media (min-width:1920px) {
		.home .header {
			background-size: cover !important;
		}
	}
</style>